<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%;padding: 0;margin: 0;" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head>
        <title>菜单管理</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}"/>
        <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
        <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
        <script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
    </head>
    <body style="height: 100%;width: 100%;padding: 0;margin: 0;">
        <table id="tt" title="菜单列表" class="easyui-treegrid" style="width:100%;height:100%;" url="/sys/menu/list"
               rownumbers="true" idField="id" treeField="name" data-options="toolbar:toolbar,singleSelect:true">
            <thead>
                <tr>
                    <th field="id" checkbox="true"></th>
                    <th field="name" width="20%">菜单名</th>
                    <th field="url" width="20%">地址</th>
                    <th field="authority" width="20%">权限</th>
                    <th field="sort" width="10%">排序</th>
                    <th field="enable" width="10%" formatter="formatEnable">是否可见</th>
                    <th field="createTimeString" width="19%">创建时间</th>
                </tr>
            </thead>
        </table>
        <script>
            function formatEnable(value){
                if (value==1){
                    return '可见';
                } else {
                    return '不可见';
                }
            }
            var toolbar = [];
        </script>


        <script sec:authorize="hasRole('SYS_MENU_ADD')">
            toolbar.push('-',{
                text:'新增',
                iconCls:'icon-add',
                handler:function(){
                    $("#addNameId").textbox("setValue",'');
                    $("#addUrlId").textbox("setValue",'');
                    $("#addAuthorityId").textbox("setValue",'');
                    $("#addSortId").textbox("setValue",'99');
                    $('#addEnableId').combobox("select",'1');
                    $('#addDialog').dialog('open');
                }
            });
        </script>

        <script sec:authorize="hasRole('SYS_MENU_UPDATE')">
            toolbar.push('-',{
                text:'修改',
                iconCls:'icon-save',
                handler:function(){
                    var row = $('#tt').treegrid('getSelected');
                    if (row){
                        var updateId = row.id;
                        $("#hiddenUpdateId").val(updateId);
                        $("#updateNameId").textbox("setValue",row.name);
                        $("#updateUrlId").textbox("setValue",row.url);
                        $("#updateAuthorityId").textbox("setValue",row.authority);
                        $("#updateSortId").textbox("setValue",row.sort);
                        $('#updateEnableId').combobox('select', row.enable);
                        $('#updateDialog').dialog('open');
                    }else{
                        $.messager.alert("提示","请先选择需要修改的数据");
                    }
                }
            });
        </script>

        <script sec:authorize="hasRole('SYS_MENU_DELETE')">
            toolbar.push('-',{
                text:'删除',
                iconCls:'icon-remove',
                handler:function(){
                    var row = $('#tt').treegrid('getSelected');
                    if (row){
                        $.messager.confirm('提示','确定要删除这条记录吗?',function(res){
                            if (res){
                                $.post("/sys/menu/deleteById",{id:row.id},function(result){
                                    if (result=='1'){
                                        console.log("success");
                                        reloads();
                                    } else if(result=='2'){
                                        $.messager.alert("提示","请先删除所有子菜单！");
                                    }else{
                                        $.messager.alert("提示","参数错误");
                                    }
                                });
                            }
                        });
                    }else{
                        $.messager.alert("提示","请先选中一条记录");
                    }

                }
            });
        </script>

        <script>
            toolbar.push('-',{
                text:'刷新',
                iconCls:'icon-reload',
                handler:reloads
            });
            function reloads(){
                $('#tt').treegrid('reload');//刷新
            }
        </script>





        <div id="addDialog" class="easyui-dialog" title="新增数据" maximizable="true" resizable="true" style="width:80%;height:450px;width:800px;padding:10px"
             data-options="title:'新增数据',modal:true,closed:true">
            <div style="margin-bottom:20px">
                <input id="addNameId" class="easyui-textbox" name="name" style="width:100%" data-options="label:'菜单名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="addUrlId" class="easyui-textbox" name="url" style="width:100%" data-options="label:'url地址:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="addAuthorityId" class="easyui-textbox" name="authority" style="width:100%" data-options="label:'访问权限:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="addSortId" class="easyui-textbox" name="sort" style="width:100%" value="99" data-options="label:'排序:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <select id="addEnableId" class="easyui-combobox" name="enable" label="是否可见" style="width:30%">
                    <option value="1">可见</option><option value="0">不可见</option>
                </select>
            </div>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">保存</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('addDialog')" style="width:80px">取消</a>
            </div>
        </div>
        <script>
            function cancelForm(id) {
                $('#'+id).dialog('close');
            }
            function submitForm() {
                var pid = 0;
                var row = $('#tt').treegrid('getSelected');
                if (row){
                    pid = row.id;
                }
                var name = $("#addNameId").val();
                var url = $("#addUrlId").val();
                var authority = $("#addAuthorityId").val();
                var enable = $("#addEnableId").val();
                var sort = $("#addSortId").val();
                $.post("/sys/menu/insert",{pid:pid,name:name,url:url,authority:authority,enable:enable,sort:sort},function(result){
                    $('#addDialog').dialog('close');
                    if (result=='1'){
                        console.log("success");
                        reloads();
                    } else{
                        $.messager.alert("提示","操作失败");
                    }
                });
            }
        </script>


        <div id="updateDialog" class="easyui-dialog" title="编辑数据" maximizable="true" resizable="true" style="width:80%;height:450px;width:800px;padding:10px"
             data-options="title:'编辑数据',modal:true,closed:true">
            <input type="hidden" id="hiddenUpdateId" />
            <div style="margin-bottom:20px">
                <input id="updateNameId" class="easyui-textbox" name="name" style="width:100%" data-options="label:'菜单名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="updateUrlId" class="easyui-textbox" name="url" style="width:100%" data-options="label:'url地址:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="updateAuthorityId" class="easyui-textbox" name="authority" style="width:100%" data-options="label:'访问权限:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input id="updateSortId" class="easyui-textbox" name="sort" style="width:100%" data-options="label:'排序:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <select id="updateEnableId" class="easyui-combobox" name="enable" label="是否可见" style="width:30%">
                    <option value="1">可见</option><option value="0">不可见</option>
                </select>
            </div>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateForm()" style="width:80px">保存</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('updateDialog')" style="width:80px">取消</a>
            </div>
        </div>
        <script>
            function submitUpdateForm() {
                var updateId = $("#hiddenUpdateId").val();;
                var name = $("#updateNameId").val();
                var url = $("#updateUrlId").val();
                var authority = $("#updateAuthorityId").val();
                var sort = $("#updateSortId").val();
                var enable = $("#updateEnableId").val();
                $.post("/sys/menu/update",{id:updateId,name:name,url:url,authority:authority,enable:enable,sort:sort},function(result){
                    $('#updateDialog').dialog('close');
                    if (result=='1'){
                        console.log("success");
                        reloads();
                    } else{
                        $.messager.alert("提示","操作失败");
                    }
                });
            }
        </script>
    </body>
</html>